<%= render Polaris::LabelledComponent.new(**wrapper_arguments) do %>
  <%= render Polaris::BaseComponent.new(**system_arguments) do %>
    <div
      class="Polaris-DropZone__Overlay Polaris-VisuallyHidden"
      data-polaris-dropzone-target="overlay"
    >
      <% unless @size == :small %>
        <%= render Polaris::StackComponent.new(vertical: true, spacing: :tight) do |stack| %>
          <% stack.with_item do %>
            <%= render Polaris::DisplayTextComponent.new(size: :small) do %>
              <%= @overlay_text %>
            <% end %>
          <% end %>
        <% end %>
      <% end %>
    </div>

    <div
      class="Polaris-DropZone__Overlay Polaris-VisuallyHidden"
      data-polaris-dropzone-target="errorOverlay"
    >
      <%= render Polaris::StackComponent.new(vertical: true, spacing: :tight) do |stack| %>
        <% stack.with_item do %>
          <%= render Polaris::DisplayTextComponent.new(size: :small) do %>
            <%= @error_overlay_text %>
          <% end %>
        <% end %>
      <% end %>
    </div>

    <div class="Polaris-DropZone__Container" data-polaris-dropzone-target="container">
      <%= render Polaris::BaseComponent.new(**file_upload_arguments) do %>
        <% if content.present? %>
          <%= content %>
        <% else %>
          <%= render Polaris::StackComponent.new(vertical: true, spacing: :tight) do |stack| %>
            <% unless @size == :medium %>
              <% stack.with_item do %>
                <img width="<%= @size == :small ? 20 : 40 %>" src="data:image/svg+xml,%3csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 10a10 10 0 11-20 0 10 10 0 0120 0zM5.3 8.3l4-4a1 1 0 011.4 0l4 4a1 1 0 01-1.4 1.4L11 7.4V15a1 1 0 11-2 0V7.4L6.7 9.7a1 1 0 01-1.4-1.4z' fill='%235C5F62'/%3e%3c/svg%3e" alt="">
              <% end %>
            <% end %>

            <% unless @size == :small %>
              <% stack.with_item do %>
                <% if @size == :medium %>
                  <div class="Polaris-DropZone-FileUpload__ActionTitle">
                    <%= @file_upload_button %>
                  </div>
                <% else %>
                  <div class="Polaris-DropZone-FileUpload__Button">
                    <%= @file_upload_button %>
                  </div>
                <% end %>
              <% end %>
            <% end %>

            <% unless @size == :small %>
              <% stack.with_item do %>
                <% help_text = capture do %>
                  <%= render Polaris::TextStyleComponent.new(variation: :subdued) do %>
                    <%= @file_upload_help %>
                  <% end %>
                <% end %>

                <% if @size == :medium %>
                  <%= polaris_caption { help_text } %>
                <% else %>
                  <%= help_text %>
                <% end %>
              <% end %>
            <% end %>
          <% end %>
        <% end %>
      <% end %>

      <% if @preview %>
        <div class="Polaris-DropZone__Loader Polaris--hidden" data-polaris-dropzone-target="loader">
          <%= polaris_spinner(size: (@size == :small) ? :small : :large) %>
        </div>
      <% end %>
    </div>

    <%= render Polaris::VisuallyHiddenComponent.new do %>
      <% if @form.present? && @attribute.present? %>
        <%= @form.file_field(@attribute, **input_options) %>
      <% else %>
        <%= file_field_tag(@name, **input_options) %>
      <% end %>
    <% end %>

    <template data-polaris-dropzone-target="previewTemplate">
      <%= tag.div(
        data: { polaris_dropzone_target: "preview" },
        class: {
          "Polaris-DropZone__Preview": true,
          "Polaris-DropZone__Preview--singleFile": !@multiple,
          "Polaris-DropZone__Preview--sizeMedium": @size == :medium,
          "Polaris-DropZone__Preview--sizeSmall": @size == :small,
        }
      ) do %>
        <% if @size.in?(%i[small]) %>
          <span class="target"></span>
        <% else %>
          <%= polaris_stack(vertical: true) do %>
            <span class="target"></span>
          <% end %>
        <% end %>
      <% end %>
    </template>

    <template data-polaris-dropzone-target="itemTemplate">
      <% if @size.in?(%i[small]) %>
        <%= polaris_thumbnail(
          size: :small,
          data: { target: "icon" },
          style: "border: none; background: none;"
        ) do |thumbnail| %>
          <%= thumbnail.with_icon(name: "AttachmentIcon") %>
        <% end %>
        <%= polaris_thumbnail(source: "#", size: :small, data: { target: "thumbnail" }) %>
      <% else %>
        <%= polaris_stack_item do %>
          <%= polaris_stack(
            alignment: :center,
            vertical: !@multiple,
            spacing: @multiple ? :default : :tight,
          ) do |stack| %>
            <% stack.with_item do %>
              <%= polaris_thumbnail(
                size: :small,
                data: { target: "icon" },
                style: "border: none; background: none;"
              ) do |thumbnail| %>
                <%= thumbnail.with_icon(name: "AttachmentIcon") %>
              <% end %>
              <%= polaris_thumbnail(source: "#", size: :small, data: { target: "thumbnail" }) %>
            <% end %>

            <% stack.with_item(fill: true) do %>
              <div data-target="content">
                <%= polaris_caption do %>
                  <%= polaris_text_subdued(data: { target: "file-size" }) { "SIZE" } %>
                <% end %>
              </div>

              <%= polaris_progress_bar(
                progress: 0,
                size: :small,
                data: { target: "progress-bar" },
                classes: "Polaris--hidden",
                style: "margin-top: 4px;"
              ) %>

              <%= polaris_inline_error(
                data: { target: "upload-error" },
                classes: "Polaris--hidden",
                style: "margin-top: 4px;"
              ) { @upload_error_text } %>
            <% end %>
          <% end %>
        <% end %>
      <% end %>
    </template>
  <% end %>
<% end %>
